<template>
  <div class="container">
    <div class="relative overflow-hidden border-b bg-white md:mx-auto">
      Tailwind CSS测试
      <div class="flex h-14 justify-center md:ml-10 md:space-x-8 md:pr-4">
        <a class="flex items-center font-medium text-gray-500 hover:text-gray-900">Home</a>
        <a class="flex items-center font-medium text-gray-500 hover:text-gray-900">Product</a>
        <a class="flex items-center font-medium text-gray-500 hover:text-gray-900">Article</a>
        <a class="flex items-center font-medium text-gray-500 hover:text-gray-900">About</a>
        <a class="flex items-center font-medium text-indigo-600 hover:text-indigo-500">Log in</a>
      </div>
    </div>
    <div class="relative overflow-hidden border-b bg-white md:mx-auto">
      Button Icon测试
      <div class="flex h-14 justify-center md:ml-10 md:space-x-8 md:pr-4">
        <el-button type="success" @click="add"><i-ep-SuccessFilled />Success</el-button>
        <el-button type="warning" @click="add"><i-ep-SuccessFilled />Warning</el-button>
        <el-button type="danger" @click="add"> <i-ep-SuccessFilled />Danger</el-button>
        <el-button type="primary" :icon="Edit" @click="add">Primary</el-button>
        <el-button type="info"><svg-icon icon-class="TroveBox" size="1.5rem" />SVG 本地图标</el-button>
      </div>
      <div>{{ count }}</div>
    </div>
    <div class="relative border-b bg-white md:mx-auto">
      scss测试
      <div class="flex h-auto justify-center md:ml-10 md:space-x-8 md:pr-4">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div style="width: 100px; height: 100px" :style="{ 'background-color': variables.bgColor }" />
      </div>
    </div>
    <div class="relative border-b bg-white md:mx-auto">
      axios测试
      <div class="flex h-auto justify-center md:ml-10 md:space-x-8 md:pr-4">
        <el-button type="primary" @click="handleGetRequest"><i-ep-Position />发送get请求</el-button>
      </div>
      <div class="flex h-auto justify-center md:ml-10 md:space-x-8 md:pr-4">
        <el-card>{{ state.res }}</el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Edit } from '@element-plus/icons-vue'
import { testApi } from '@/server/test'
import variables from '@/assets/css/variables.module.scss'
// console.log(variables.bgColor)

const count = ref(0)
const add = () => {
  count.value++
}
// get请求
const state = reactive({
  res: {}
})
const handleGetRequest = async () => {
  const testParams = {
    username: 'admin',
    password: '123456'
  }
  state.res = await testApi(testParams)
}
</script>

<style lang="scss" scoped>
.box1 {
  width: 100px;
  height: 100px;
  background-color: $bg-color-black;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: $bg-color-red;
}

.box3 {
  width: 100px;
  height: 100px;
  background-color: $bg-color-green;
}

.box4 {
  width: 100px;
  height: 100px;
  background-color: $bg-color-yellow;
}
</style>
